import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';


void main()=>runApp(
    MaterialApp(
      home: Scaffold(
        body: MyApp(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        textTheme: TextTheme(),
        buttonTheme: ButtonThemeData(buttonColor: Colors.yellow),
      ),
    )
);

class MyApp extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }

}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0,MediaQuery.of(context).padding.top,0,0),
      child: Flow(
        delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
        children: <Widget>[
          Container(width: 80.0, height:80.0, color: Colors.red,),
          Container(width: 80.0, height:80.0, color: Colors.green,),
          Container(width: 80.0, height:80.0, color: Colors.blue,),
          Container(width: 80.0, height:80.0,  color: Colors.yellow,),
          Container(width: 80.0, height:80.0, color: Colors.brown,),
          Container(width: 80.0, height:80.0,  color: Colors.purple,),
        ],
      ),
    );
  }
}
class TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin;

  TestFlowDelegate({this.margin = EdgeInsets.zero});

  double width = 0;
  double height = 0;

  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
      var w = context.getChildSize(i)!.width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        //绘制子widget(有优化)
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i)!.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    // 指定Flow的大小，简单起见我们让宽度竟可能大，但高度指定为200，
    // 实际开发中我们需要根据子元素所占用的具体宽高来设置Flow大小
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}
// Padding(
// padding: EdgeInsets.fromLTRB(0,MediaQuery.of(context).padding.top,0,0),
// child: Wrap(
// //纵轴方向的对齐方式
// runAlignment: WrapAlignment.center,
// children: <Widget>[
// Image(
// image: AssetImage("images/avatar.png"),
// width: 100.0,
// ),
// //快捷的构造函数Image.asset用于从asset中加载、显示图片
// Image.asset("images/avatar.png",
// width: 100.0,
// ),
// Image(
// image: NetworkImage(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322"),
// width: 200.0,
// height: 200.0,
// ),
// //快捷的构造函数Image.network用于从网络加载、显示图片
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// ),
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// ),
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// height: 100.0,
// fit: BoxFit.fill,//会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形
// ),
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// height: 100.0,
// fit: BoxFit.cover,//会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁
// ),
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// height: 100.0,
// fit: BoxFit.contain,//这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
// ),
// Image.network(
// "https://img1.baidu.com/it/u=3435361414,3054623528&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=322",
// width: 100.0,
// height: 100.0,
// fit: BoxFit.fitWidth,//图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
// ),
// ],
// ),
// );








